<template>
  <div class="box">
    <div class="box_left">
      <div class="box_left_title">{{ szdsForm.regionName }}</div>
      <div class="mapBox">
        <qyfbMap
          ref="qyfbMap"
          :mapPopList="mapPopList"
          style="width: 100%; height: 100%"
          @mapSelected="mapSelected"
        ></qyfbMap>
      </div>
      <div class="ds_overview">
        <div class="ds_overview_label">
          <div class="ds_overview_label_left">
            <img src="~img/qyfbszds1.png" alt="" />
          </div>
          <div class="ds_overview_label_right">
            <div class="ds_overview_label_name">企业数量（总）</div>
            <div class="ds_overview_label_text">{{ szdsForm.qysl }}</div>
          </div>
        </div>
        <div class="ds_overview_label ds_overview_label_r">
          <div class="ds_overview_label_left">
            <img src="~img/qyfbszds2.png" alt="" />
          </div>
          <div class="ds_overview_label_right">
            <div class="ds_overview_label_name">主营业务收入</div>
            <div class="ds_overview_label_text">{{(szdsForm.zyywsr/100000000).toFixed(2)  }}亿</div>
          </div>
        </div>
        <div class="ds_overview_label">
          <div class="ds_overview_label_left">
            <img src="~img/qyfbszds3.png" alt="" />
          </div>
          <div class="ds_overview_label_right">
            <div class="ds_overview_label_name">户均注册资本额</div>
            <div class="ds_overview_label_text">{{ (szdsForm.hjzczbe).toFixed(2) }}</div>
          </div>
        </div>
        <div class="ds_overview_label ds_overview_label_r">
          <div class="ds_overview_label_left">
            <img src="~img/qyfbszds4.png" alt="" />
          </div>
          <div class="ds_overview_label_right">
            <div class="ds_overview_label_name">利润额</div>
            <div class="ds_overview_label_text">{{ (szdsForm.lre/100000000).toFixed(2) }}亿</div>
          </div>
        </div>
        <div class="ds_overview_label">
          <div class="ds_overview_label_left">
            <img src="~img/qyfbszds5.png" alt="" />
          </div>
          <div class="ds_overview_label_right">
            <div class="ds_overview_label_name">用工人数</div>
            <div class="ds_overview_label_text">{{ szdsForm.ygrs }}</div>
          </div>
        </div>
        <div class="ds_overview_label ds_overview_label_r">
          <div class="ds_overview_label_left">
            <img src="~img/qyfbszds6.png" alt="" />
          </div>
          <div class="ds_overview_label_right">
            <div class="ds_overview_label_name">新设立企业数量</div>
            <div class="ds_overview_label_text">{{ szdsForm.xslqysl }}</div>
          </div>
        </div>
        <div class="ds_overview_label">
          <div class="ds_overview_label_left">
            <img src="~img/qyfbszds7.png" alt="" />
          </div>
          <div class="ds_overview_label_right">
            <div class="ds_overview_label_name">贷款企业数量</div>
            <div class="ds_overview_label_text">{{ szdsForm.dkqysl }}</div>
          </div>
        </div>
        <div class="ds_overview_label ds_overview_label_r">
          <div class="ds_overview_label_left">
            <img src="~img/qyfbszds8.png" alt="" />
          </div>
          <div class="ds_overview_label_right">
            <div class="ds_overview_label_name">纳税额</div>
            <div class="ds_overview_label_text">{{ (szdsForm.nsje/100000000).toFixed(2) }}亿</div>
          </div>
        </div>
        <div class="ds_overview_label">
          <div class="ds_overview_label_left">
            <img src="~img/qyfbszds9.png" alt="" />
          </div>
          <div class="ds_overview_label_right">
            <div class="ds_overview_label_name">高成长性企业数量</div>
            <div class="ds_overview_label_text">{{ szdsForm.gczqysl }}</div>
          </div>
        </div>
        <div class="ds_overview_label ds_overview_label_r">
          <div class="ds_overview_label_left">
            <img src="~img/qyfbszds10.png" alt="" />
          </div>
          <div class="ds_overview_label_right">
            <div class="ds_overview_label_name">获得专利企业数量</div>
            <div class="ds_overview_label_text">{{ szdsForm.zlsl }}</div>
          </div>
        </div>
      </div>
      <div class="ltqy_topTen">{{ cyyTitle }}</div>
      <div class="ltqy_topTen_Box">
        <div class="zwxx_tips" v-if="cyyTotalList.length<=0">
          暂无数据
        </div>
        <div class="ltqy_topTen_auto" v-if="cyyTotalList.length>0">
          <div
            class="ltqy_topTen_circulate"
            v-for="(item, index) in cyyTotalList"
            :key="index"
          >
            <div class="ltqy_topTen_circulate_left_Bigbox">
              <div class="company_shortName">企业名称</div>
              <div class="ltqy_topTen_circulate_right">
                <div class="company_name">{{ item.parkName }}</div>
                <div class="ltqy_topTen_circulate_information">
                  <div class="dscyy_contant_box">
                    <div class="dscyy_contant_box_name">企业</div>
                    <div class="dscyy_contant_box_num">{{ item.count }}家</div>
                  </div>
                  <!-- ===================================== -->
                  <!-- <div class="ltqy_topTen_fraction">625-640分</div>
                  <div class="ltqy_topTen_leve">B3</div>
                  <div class="ltqy_topTen_area">工业园区</div> -->
                </div>
              </div>
            </div>
            <div class="ltqy_topTen_icon">
              <img src="~img/ssgs_icon.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="box_right">
      <div class="szxqy_title">各区域上中下游企业数量</div>
      <div class="szx_echartsBox" >
        <qyfbEcharts1 :data="szxyqysl" v-if="szxyqysl.area.length > 0"></qyfbEcharts1>
        <div class="zwxx_tips" v-else>暂无数据</div>

      </div>
      <div class="szxqy_title">各区域营业收入TOP5企业指标对比</div>
      <div class="zwxx_tips" v-if="top5zbdbList.length<=0">
        暂无数据
      </div>
      <div class="top_fiveBox" v-if="top5zbdbList.length>0">
        <div>
          <div class="top_five_tableLeft tableLabel"></div>
          <div
            class="top_five_tableLeft tableLabel"
            v-for="(item, index) in zbdbAreaList"
            :key="index"
          >
            {{ item }}
          </div>
        </div>
        <div>
          <div class="tableLabel tableLabel_title">营业收入</div>
          <div
            class="top_five_tableContant tableLabel"
            v-for="(item, index) in top5Yysr"
            :key="index"
          >
            {{ (item/100000000).toFixed(2) }}亿
          </div>
        </div>
        <div>
          <div class="tableLabel tableLabel_title">利润总额</div>
          <div
            class="top_five_tableContant tableLabel"
            v-for="(item, index) in top5Lrze"
            :key="index"
          >
             {{ (item/100000000).toFixed(2) }}亿
          </div>
        </div>
        <div>
          <div class="tableLabel tableLabel_title">净资产回报率</div>
          <div
            class="top_five_tableContant tableLabel"
            v-for="(item, index) in top5Jzchbl"
            :key="index"
          >
            {{ (item/100).toFixed(2) }}%
          </div>
        </div>
        <div>
          <div class="tableLabel tableLabel_title">融资金额</div>
          <div
            class="top_five_tableContant tableLabel"
            v-for="(item, index) in top5Rzje"
            :key="index"
          >
            {{ (item/100000000).toFixed(2) }}亿
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  queryAreaCorpNum,
  AreaIncomeTop5CorpNum,
  querySZDS,
  queryIndustrialParksCount,
  bigCityIndustrialGraph,
  queryAreaDistribution,
} from "@/api/screen/qyfb";
import qyfbEcharts1 from "./qyfbEcharts1.vue";
import qyfbMap from "./qyfbMap.vue";
export default {
  name: "" /*1. Vue扩展 */,
  extends: "", // extends和mixins都扩展逻辑，需要重点放前面
  mixins: [],
  components: {
    qyfbEcharts1,
    qyfbMap,
  } /* 2. Vue数据 */,
  props: {
    dropName: {
      type: String,
      default: "电子信息产业",
    },
  },
  model: { prop: "", event: "" }, // model 会使用到 props
  data() {
    return {
      cyyTitle: "苏州大市产业园",
      mapPopList: [],
      // 苏州大市
      szdsForm: {
        regionName: "苏州大市",
        qysl: "",
        zyywsr: "",
        hjzczbe: "",
        lre: "",
        ygrs: "",
        xslqysl: "",
        nsezb: "",
        gczxqyzb: "",
        hdzlqyslzb: "",
      },

      // ==============
      cyyTotalList: [
        {
          parkName: "",
          count: "",
        },
      ],
      zbdbAreaList: [],
      top5Yysr: [],
      top5Lrze: [],
      top5Jzchbl: [],
      top5Rzje: [],
      szxyqysl: {
        area: [],
        downNum: [],
        midNum: [],
        upNum: [],
      },
      top5zbdbList:[],
    };
  },
  computed: {},
  watch: {} /* 3. Vue资源 */, // watch 监控的是 props 和 data，有必要时监控computed
  filters: {},
  directives: {} /* 4. Vue生命周期 */,
  created() {
    this.getQueryAreaCorpNum();
    this.getAreaIncomeTop5CorpNum();
    this.getQuerySZDS();
    this.queryIndustrialParksCount();
    this.getBigCityIndustrialGraph();
    this.getQueryAreaDistribution();
  },
  mounted() {},
  destroy() {} /* 5. Vue方法 */,
  methods: {
    mapSelected(val) {
      console.log(val, "点击地图");
      if (val.data.name == this.szdsForm.regionName) {
        // 取消点击
        this.getQuerySZDS();
        this.queryIndustrialParksCount();
        this.getBigCityIndustrialGraph();
      } else {
        this.cyyTitle = val.data.name + "产业园";
        querySZDS({ lx:this.dropName, qy: val.data.name }).then(
          (response) => {
            this.szdsForm = response.data;
          }
        );
        queryIndustrialParksCount({
          mainIndustry: this.dropName,
          belongsToSector: val.data.name,
        }).then((response) => {
          this.$refs.qyfbMap.total = response.data;
        });
        bigCityIndustrialGraph({
          mainIndustry: this.dropName,
          belongsToSector: val.data.name,
        }).then((response) => {
          this.cyyTotalList = response.rows;
        });
      }
    },
    // 鼠标移入弹窗内容
    getQueryAreaDistribution() {
      let that = this;
      queryAreaDistribution({
        mainIndustry: "电子信息",
        belongsToSector: "",
      }).then((response) => {
        let newList = [];
        let rowList = response.rows;
        console.log(rowList, "数据处理签");
        // 第一层
        let areaList = [];
        rowList.forEach((element) => {
          areaList.push(element.qy);
        });
        let areaListfilture = that.unlink(areaList);
        areaListfilture.forEach((element) => {
          newList.push({
            area: element,
            children: [],
          });
        });
        // 第二层
        for (let i in rowList) {
          for (let e in newList) {
            if (rowList[i].qy == newList[e].area) {
              newList[e].children.push({
                cpcc: rowList[i].cpcc,
                children: [],
              });
            }
          }
        }
        for (let i in newList) {
          newList[i].children = that.uniqueKey(newList[i].children, "cpcc");
        }
        // 第三层
        for (let i in rowList) {
          for (let a in newList) {
            for (let achild in newList[a].children) {
              if (
                rowList[i].qy == newList[a].area &&
                rowList[i].cpcc == newList[a].children[achild].cpcc
              ) {
                newList[a].children[achild].children.push({
                  cpmc: rowList[i].cpmc,
                  children: [],
                });
              }
            }
          }
        }
        for (let i in newList) {
          for (let a in newList[i].children) {
            console.log(newList[i].children[a].children, "去重前");
            newList[i].children[a].children = that.uniqueKey(
              newList[i].children[a].children,
              "cpmc"
            );
          }
        }
        // 第四层
        for (let i in rowList) {
          for (let a in newList) {
            for (let achild in newList[a].children) {
              for (let achild2 in newList[a].children[achild].children) {
                // console.log(newList[a].children[achild].children[achild2],'到这里了')
                if (
                  rowList[i].qy == newList[a].area &&
                  rowList[i].cpcc == newList[a].children[achild].cpcc &&
                  rowList[i].cpmc ==
                    newList[a].children[achild].children[achild2].cpmc
                ) {
                  console.log();
                  newList[a].children[achild].children[achild2].children.push({
                    cpxf: rowList[i].cpxf,
                    num: rowList[i].num,
                  });
                }
              }
            }
          }
        }
        this.mapPopList = newList;
        console.log(newList, "newListnewListnewList");
      });
    },
    // 苏州大市产业园
    getBigCityIndustrialGraph() {
      bigCityIndustrialGraph({
        mainIndustry: this.dropName,
        belongsToSector: "",
      }).then((response) => {
        this.cyyTotalList = response.rows;
      });
    },
    // 产业园数量
    queryIndustrialParksCount() {
      queryIndustrialParksCount({
        mainIndustry:this.dropName,
        belongsToSector: "",
      }).then((response) => {
        this.$refs.qyfbMap.total = response.data;
      });
    },
    // 苏州大市
    getQuerySZDS() {
      querySZDS({ lx: this.dropName, qy: "" }).then((response) => {
        console.log(response, "默认苏州大市");
        this.szdsForm = response.data;
        this.cyyTitle = "苏州大市产业园";
      });
    },
    // 各区域营业收入TOP5企业指标对比
    getAreaIncomeTop5CorpNum() {
      AreaIncomeTop5CorpNum({ lx: this.dropName}).then((response) => {
        (this.zbdbAreaList = []),
          (this.top5Yysr = []),
          (this.top5Lrze = []),
          (this.top5Jzchbl = []),
          (this.top5Rzje = []);
        this.top5zbdbList=response.rows
        let list = response.rows;
        console.log(list,'各区域营业收入TOP5企业指标对比接口数据')
        list.forEach((element) => {
          if (element) {
            this.zbdbAreaList.push(element.regionName);
            this.top5Yysr.push(element.top5Yysr);
            this.top5Lrze.push(element.top5Lrze);
            this.top5Jzchbl.push(element.top5Jzchbl);
            this.top5Rzje.push(element.top5Rzje);
          }
        });
      });
    },
    // 各区域上中下游企业数量
    getQueryAreaCorpNum() {
      queryAreaCorpNum({ lx: this.dropName }).then((response) => {
        let list = response.data;
        this.szxyqysl = {
          area: [],
          downNum: [],
          midNum: [],
          upNum: [],
        };
        list.forEach((item) => {
          this.szxyqysl.area.push(item.area);
          this.szxyqysl.downNum.push(item.downNum);
          this.szxyqysl.midNum.push(item.midNum);
          this.szxyqysl.upNum.push(item.upNum);
        });
      });
    },
    unlink(arr) {
      return arr.filter(function (item, index, arr) {
        //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
        return arr.indexOf(item, 0) === index;
      });
    },
    uniqueKey(arr, key) {
      const res = new Map();
      return arr.filter((arr) => !res.has(arr[key]) && res.set(arr[key], 1));
    },
  }, // all the methods should be put here in the last
  // 数组去重
};
</script>
<style scoped lang="scss">
.box {
  width: 100%;
  height: 100%;
  display: flex;
}
.box_left {
  width: 70%;
  height: 100%;
  //   background-color: pink;
  position: relative;
}
.box_right {
  width: 30%;
  height: 100%;
  //   background-color: aqua;
}
.box_left_title {
  width: 100%;
  height: 30px;
  line-height: 25px;
  background-image: url("~img/qyfb_longtitle.png");
  background-size: 100% 100%;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  font-size: 25px;
  padding-left: 70px;
  color: #cff4fe;
}
.ds_overview {
  width: 50%;
  height: 400px;
  //   background-color: #cff4fe;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}
.ds_overview_label {
  display: flex;
  width: 48%;
  height: 71px;
  background: linear-gradient(-33deg, #0d4292 0%, #052879 100%);
  align-items: center;
}

.ds_overview_label_name {
  color: #68c8fa;
  font-size: 15px;
}
.ds_overview_label_text {
  color: #ffffff;
  font-size: 28px;
  font-family: YouSheBiaoTiHei;
}
.ds_overview_label_left {
  // width: auto;
  width: 30%;
  margin-left: 7%;
  // background-color: #5293F7;
  img {
    width: 70%;
  }
}
.ds_overview_label_r {
  margin-left: 2.5%;
}
.ltqy_topTen {
  width: 40%;
  height: 50px;
  color: #cff4fe;
  background-image: url("~img/zyqj_title.png");
  background-size: 100% 100%;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  font-size: 25px;
  line-height: 25px;
  padding-left: 70px;
  margin-top: 10px;
}
.ltqy_topTen_Box {
  width: 40%;
  margin-top: -10px;
  height: 270px;
  // background-color: red;
  background-image: url("~img/ltqy_topTen_back.png");
  background-size: 100% 100%;
  padding: 15px 25px;
}
.ltqy_topTen_auto {
  height: 95%;
  margin-top: 2.5%;
  overflow: auto;
}
.ltqy_topTen_auto::-webkit-scrollbar {
  display: none;
}
.company_shortName {
  width: 45px;
  height: 45px;
  background-color: #e4a657;
  font-size: 16px;
  color: #fff;
  text-align: center;
  line-height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 3px;
}
.ltqy_topTen_circulate {
  display: flex;
  justify-content: space-between;
  margin-bottom: 22px;
}
.ltqy_topTen_circulate_right {
  margin-left: 10px;
}
.company_name {
  font-size: 21px;
  color: #fff;
  font-size: 18px;
}
.ltqy_topTen_circulate_information {
  display: flex;
  margin-top: 5px;
}
.ltqy_topTen_fraction {
  width: 96px;
  height: 23px;
  background-color: #dceaf2;
  text-align: center;
  line-height: 23px;
  border-radius: 2px;
}
.ltqy_topTen_leve {
  width: 39px;
  height: 23px;
  text-align: center;
  line-height: 23px;
  background-color: #398ad9;
  color: #fff;
  border-radius: 2px;
  margin-left: -5px;
}
.ltqy_topTen_area {
  background-color: #68c8fa;
  height: 23px;
  line-height: 23px;
  font-size: 14px;
  padding: 0 7px;
  border-radius: 2px;
  margin-left: 5px;
}
.ltqy_topTen_circulate_left_Bigbox {
  display: flex;
  align-items: center;
}
.ltqy_topTen_icon {
  width: 11%;
  display: flex;
  align-items: center;

  img {
    width: 100%;
  }
}
.szxqy_title {
  width: 100%;
  height: 50px;
  background-image: url("~img/zyqj_title.png");
  background-size: 100% 100%;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  font-size: 25px;
  line-height: 25px;
  padding-left: 70px;
  margin-top: 10px;
  color: #cff4fe;
}
.szx_echartsBox {
  margin-top: -10px;
  width: 100%;
  height: 270px;
  // background-color: #fff;
}
.top_fiveBox {
  width: 100%;
  height: 420px;
  // background-color: #cff4fe;
  margin-top: -10px;
  display: flex;
  justify-content: space-between;
}
.top_fiveBox > div {
  width: 17%;
}
.tableLabel {
  width: 100%;
  height: 35px;
  text-align: center;
  line-height: 35px;
  margin-bottom: 5px;
  font-size: 14px;
  color: #d7f4fe;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
.top_five_tableLeft {
  // background-color: #003686;
  background: linear-gradient(90deg, #003686 0%, rgba(27, 67, 184, 0) 100%);
}
.top_five_tableContant {
  background-color: #01286a;
}
.tableLabel_title {
  background: linear-gradient(0deg, #015eea, #00c0fa);
  border: 1px solid;
  border-image: linear-gradient(0deg, #58baf9, #3a87e6) 2 2;
  box-shadow: 0px 0px 10px 5px rgba(98, 190, 249, 0.35);
}
.mapBox {
  width: 60%;
  height: 100%;
  // background-color:rgba(131, 170, 255, 0.2);
  position: absolute;
  right: 0;
}
// ======================
.mapPop {
  width: 333px;
  height: 554px;
  background-color: #00256c;
  padding: 20px;
  border: 1px solid #3a7abd;
}
.mapPop_title {
  width: 100%;
  height: 27px;
  background: linear-gradient(90deg, #2981ee 0%, rgba(27, 67, 184, 0.1) 100%);
  font-size: 24px;
  color: #ffffff;
  font-family: YouSheBiaoTiHei;
  line-height: 27px;
  padding-left: 10px;
  margin-top: 10px;
}
.mapPop_small_title {
  // font-size: 20px;
  color: #e0f8ff;
  font-weight: bold;
  margin-top: 15px;
}
.mapPop_contant {
  color: #7cdffb;
  margin-top: 10px;
}
.mapPop_contant2 {
  color: white;
  font-size: 14px;
}
.mapPop_contant3 {
  font-size: 4px;
  color: #7cdffb;
  margin-top: 20px;
}
.dscyy_contant_box {
  display: flex;
}
.dscyy_contant_box_name {
  height: 20px;
  padding: 0 10px;
  background-color: #398ad9;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  border-radius: 2px 0 0 2px;
}
.dscyy_contant_box_num {
  height: 20px;
  padding: 0 10px;
  background-color: #dceaf2;
  font-size: 12px;
  line-height: 20px;

  border-radius: 0 2px 2px 0;
}
.zwxx_tips {
  display: flex;
  align-items: center;
  justify-content: center;
 margin-top: 10%;
  color: #fff;
}

</style>
